import {type CSSProperties, useEffect, useState, useMemo} from 'react'
import {type CollapseProps, Form, Row, Steps} from 'antd'
import {Collapse, theme} from 'antd'
import CycleForm from '@/components/DynamicSearchForm/CycleForm.tsx'
import PropTypes from 'prop-types'
import {reviewCommentsView} from "@/axios/apis.ts";
import oaSuccess from '@/assets/img/oa/oaSuccess.png';
import oaTime from '@/assets/img/oa/oaTime.png';

const ApprovalRecords = (props) => {
    const {processInfo} = props
    let [formFields] = useState([
        {
            type: 'input',
            name: 'showName',
            label: '员工姓名',
        },
        {
            type: 'input',
            name: 'orgName',
            label: '所属机构',
        },
        {
            type: 'input',
            name: 'localPhone',
            label: '员工座机',
        },
        {
            type: 'input',
            name: 'emailStr',
            label: '员工邮箱',
        },
        {
            type: 'input',
            name: 'applicantTime',
            label: '申请时间',
        },
    ])
    const [activeKey, setActiveKey] = useState()
    const [form] = Form.useForm()
    const [stepsList, setStepsList] = useState<[]>([])
    useEffect(() => {
        if (!Object.keys(processInfo).length) return
        if (processInfo && Object.keys(processInfo).length) {
            form.setFieldsValue(processInfo)
        }
        reviewCommentsView({processInstanceId: processInfo.processinstanceId}).then(res => {
            // res && setStepsList(res)
            const list = res.reduce((prev, item) => {
                prev.push({
                    title: <><img src={oaTime} style={{width: '14px', height: '14px'}} />{item.createTime}</>,
                    icon: <><img src={oaSuccess} style={{width: '24px', height: '24px'}} /></>,
                    description:
                        <>
                            <div className="title">{item.userName}</div>
                            <div className="content">
                                <div>审批结果：<span
                                    className={`${item.approvalStatus === '同意' ? 'success' : 'error'}`}>{item.approvalStatus}</span>
                                </div>
                                <div>审批意见：{item.reviewComments}</div>
                            </div>
                        </>,
                    status: 'finish'
                })
                return prev
            }, [])
            setStepsList(list)
        })
    }, [processInfo])
    const extraVal = useMemo(() => {
        return activeKey && Array.isArray(activeKey) && activeKey.length
            ? '收起'
            : '展开'
    }, [activeKey])

    const items: CollapseProps['items'] = [
        {
            key: '1',
            label: '发起人信息',
            extra: extraVal,
            showArrow: false,
            children: (
                <>
                    <Form
                        layout="horizontal"
                        autoComplete="off"
                        labelCol={{span: 8}}
                        wrapperCol={{span: 16}}
                        form={form}
                        disabled={true}
                    >
                        <Row>
                            <CycleForm fields={formFields} />
                        </Row>
                    </Form>
                    <Steps
                        direction="vertical"
                        items={stepsList}
                        className="oa-step-strip"
                    /></>
            ),
        },
    ]

    return (
        <Collapse
            bordered={false}
            items={items}
            className="InitiatorCollapse"
            activeKey={activeKey}
            onChange={(key) => {
                setActiveKey(key)
            }}
        />
    )
}
ApprovalRecords.propTypes = {
    processInfo: PropTypes.object.required,
}
export default ApprovalRecords
